<template>
  <div class="key-number">
    <div class="cont-super">
      <div class="cont-one">
        <div class="cat">
          <div class="base">1</div>
          <div class="base">2</div>
        </div>
        <div class="cat">
          <div class="base">4</div>
          <div class="base">5</div>
        </div>
        <div class="cat">
          <div class="base">7</div>
          <div class="base">8</div>
        </div>
        <div class="base">0</div>
      </div>

      <div class="cont-two">
        <div class="base">3</div>
        <div class="base">6</div>
        <div class="base">9</div>
        <div class="base disabled">.</div>
      </div>

      <div class="cont-three">
        <div class="base del">删除</div>
        <div class="base confirm">确定</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="less" scoped>

.base {
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background: white;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 550;

  &.disabled {
    pointer-events: none;
    color: white !important;
    background: white !important;
  }

  &:active {
    background: #ebedf0;
  }
}

.key-number {
  padding: 14px;
  background: #f5f4f9;

  .cont-super {
    display: grid;
    grid-gap: 12px;
    grid-template-columns: 2fr 1fr 1fr;
  }

  .cont-one {
    display: grid;
    grid-gap: 12px;
    grid-template-columns: 1fr;

    .cat {
      display: grid;
      grid-gap: 12px;
      grid-template-columns: 1fr 1fr;
    }
  }

  .cont-two {
    display: grid;
    grid-gap: 12px;
    grid-template-columns:1fr;
  }

  .cont-three {
    display: grid;
    grid-gap: 12px;
    grid-template-columns:1fr;

    .confirm {
      height: 144px;
      color: white;
      background: #009ff0;

      &:active {
        opacity: .8;
      }
    }

    .del {
      height: 40px;
    }
  }

}
</style>
